<template>
    <div class="my-container">
        <!-- 个人信息模块 -->
        <van-cell-group class="myInfo" v-show="user"> 
            <!-- 基础信息 -->
            <van-cell title="单元格" value="内容" center class="baseInfo" >
                    <van-image
                    class="avatar"
                    width="50"
                    round
                    slot="icon"    
                    height="50"
                    fit="cover"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                    />
                <div slot="title" class="name">最佳歌手</div>
                <van-button size="small" class="editBtn" round>编辑资料</van-button>            
            </van-cell>
            <!-- 数据信息 -->
            <van-grid slot="" :border="false" class="data-info">
                <van-grid-item class="data-info-item">
                    <div class="text-wrap">
                        <div class="count">123</div> 
                        <div class="text">头条</div> 
                    </div>  
                </van-grid-item> 
                <van-grid-item class="data-info-item">
                    <div class="text-wrap">
                        <div class="count">32</div> 
                        <div class="text">获赞</div>                    
                    </div>  
                </van-grid-item > 
                <van-grid-item class="data-info-item">
                    <div class="text-wrap">
                        <div class="count">0</div> 
                        <div class="text">关注 </div>                    
                    </div>  
                </van-grid-item> 
                <van-grid-item  class="data-info-item"> 
                    <div class="text-wrap">
                        <div class="count">6455</div> 
                        <div class="text">粉丝</div>                     
                    </div>  
                </van-grid-item> 
            </van-grid>  
        </van-cell-group>
        <!-- 未登录 -->
        <div class="not-login" v-show="!user" @click="$router.push('/login')"> 
            <div>
                <van-image
              round
              width="64px"
              height="64px" 
                />
            </div>
            <div class="not-login-text" style="font-size: 16px">
                未登录
            </div>
        </div>
        <!-- 中间收藏和历史 -->
        <van-grid :column-num="2" class="nav-grid">
            <van-grid-item icon="star-o" text="收藏" class="nav-grid-item"/>
            <van-grid-item icon="clock-o" text="历史" class="nav-grid-item"/>
        </van-grid>

        <van-cell title="消息通知" is-link  url="wht.im"/>
        <van-cell title="小智同学" is-link  url="wht.im" to="/chat" />
        <van-cell title="联系客服" is-link  url="wht.im"/>
        <van-cell title="退出登录" @click="onLogout" style="text-align: center;color: #C82B29
        "
        v-if="user"
        />
    </div>
</template> 
<script> 
import { mapState } from 'vuex'
import { getUserInfo } from '@/api/user'
export default {
 name: 'My',
 data() {
     return {
         mas:11
     }
 },
 methods: {
     onLogout(){
         //弹出弹框  用户确认 
        //确认完毕  退出登录
         this.$dialog.confirm({
             title:'退出提示',
             message:'确认退出吗'
         }).then(()=> {
             //确认执行这里
            //  1清楚用户信息
            this.$store.commit('setUser',null)
         }).catch(()=> {
             //退出执行这里

         })

     },
     async getCurrentInfo(){
         const { data } = await getUserInfo()
         console.log(data);
     }
 },
computed: {
    ...mapState(['user'])
 },
 created(){
     this.getCurrentInfo()
 }
}
</script>
<style lang="less" scoped> 
.span{
    font-size: 14px;
}
.text {
    font-size: 15px;
}
.myInfo{
    background-color: rgb(214, 183, 183);
    .baseInfo {
        height: 115px;
        padding-top: 38px;
        padding-bottom: 11px;
        padding-left: 30px;
        box-sizing: border-box;
        background-color: unset;
        .avatar {
            width: 66px;
            height: 66px;
            border: 1.5px solid #fff;
            box-sizing: border-box;
            margin-right: 11px;
        }
        .name{
            color: #fff;
            font-size: 15px;
        }
        .editBtn{
            height: 20px;
            color: #666;
        }
    }
    .data-info {
        .data-info-item {
            height: 65px;
            color: #fff;
            .text-wrap{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            .count {
                font-size: 16px;
            }
            .text {
                font-size: 11px;
            }
        }
    }
    /deep/ .van-grid-item__content{
        background-color: unset; 
    }
}
.nav-grid {
     .nav-grid-item {
        height: 70px !important;
        /deep/ .van-icon-star-o {
            font-size: 22px;
            color: #E0443E;
        }
        /deep/ .van-icon-clock-o{
            font-size: 22px;
            color: #009759;
        }
        /deep/ .van-grid-item__text {
            font-size: 14px;
        }
     }
 }
 .not-login {
     background-color: rgb(214, 183, 183);
     height: 180px;
     display: flex;
    justify-content: center;
     flex-direction: column;
     align-items: center;
    .not-login-text {
        color: #fff;
        font-size: 14px;
    }

 }
</style>

